<template>
  <!-- 合同基本信息 -->
  <div class="ContractInfo">
    <div class="router-box" style=" margin-bottom: 20px;">
      <el-row :gutter="10">
        <el-col :span="8">
          <router-link :to="{name:'ContractInfo'}">基本信息</router-link>
        </el-col>
        <el-col :span="8">
          <router-link :to="{name:'DeviceMatching'}">设备匹配</router-link>
        </el-col>
        <el-col :span="8">
          <router-link :to="{name:'DeliverGoodsHistory'}">发货信息</router-link>
        </el-col>
      </el-row>
    </div>
    <div class="search-box">
      <el-input v-model="searchInput" placeholder="请输入内容" class="input-with-select">
        <el-button slot="append"  icon="el-icon-search" @click="seach"></el-button>
      </el-input>

    </div>

    <!-- 表格 -->
    <div class="absolute-box" style='flex:1' v-if='heTong.length>0'>
      <el-table @row-click="openDialog"
                :data="heTong"
                height="100%"
                border
                style="width: 100%;">
        <el-table-column
            prop="hT_ID_N"
            label="合同内部编号">
        </el-table-column>
        <el-table-column
            prop="qianDingDate"
            label="签订日期">
        </el-table-column>
        <el-table-column
            prop="hT_Title"
            label="名称">
        </el-table-column>
        <el-table-column
            prop="sum_AddedMoney"
            label="金额">
        </el-table-column>
        <el-table-column
            prop="conpanyGroup"
            label="单位">
        </el-table-column>
        <el-table-column
            prop="qiandingr"
            label="签订人">
        </el-table-column>
        <el-table-column
            prop="wGdate"
            label="完成日期">
        </el-table-column>
        <el-table-column
            prop="htStatus"
            label="状态">
        </el-table-column>

      </el-table>
    </div>

    <!-- 弹出form -->
    <el-dialog :title="model.hT_ID_N" :visible.sync="dialogFormVisible">
      <el-form :model="model">
        <el-form-item label="内部编号">
          <el-input v-model="model.hT_ID_N" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="外部编号">
          <el-input v-model="model.hT_ID_W" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="合同名称">
          <el-input v-model="model.hT_Title" readonly="readonly"></el-input>
        </el-form-item>
        <el-form-item label="签订日期">
          <el-input v-model="model.qianDingDate" readonly="readonly" type="textarea "></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return{
        heTong: {},
        set:{age:123},
        dialogFormVisible:false,
        model: {},
        searchInput:"",
        searchUrl:'/mock/HeTong/InitWaitMatchHetongList.json'
      }
    },
    created() {
      // 在模板渲染成html前调用,即通常初始化某些属性值

      this.$http.get('/mock/HeTong/GetHetongByCondition.json').then((response) => {
        response = response.body;
        this.heTong = response.rows;
      });
    },
    methods: {
      openDialog:function(row, event, column) {
        this.dialogFormVisible=true;
        this.model = row;
      },
      seach(){
        console.log(123);
        this.$http.get(this.searchUrl,this.searchInput).then(

          (response) => {this.heTong=response.body.rows},

          (response) => {console.log("出错了");}
        ).catch(function(response) {
          console.log(response)
        })
      }
    }
  }
</script>

<style>

</style>